<template>
  <div :class="stepClass">
    <div class="sh-step-timer" v-if="isTimer">{{time}}</div>
    <div :class="stepHeadClass" >
      <div @click="selectStep"><Icon v-if="icon" :type="icon" size="28" class="iconClass" /></div>
      <div :class="stepHeadIconClass" v-if="!icon" @click="selectStep">
        <span v-if="isShowStepNum">{{stepNum}}</span>
      </div>
      <div class="sh-step-head-line"></div>
    </div>
    <div class="sh-step-content">
      <div class="sh-step-content-title">{{title}}</div>
      <div class="sh-step-content-des">
        <slot>
          <div class="sh-step-content-des-default">{{description}}</div>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
const prefix = 'sh-step'

export default {
  name: 'Step',
  props: {
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    },
    status: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // stepStatus: ['wait', 'process', 'finish', 'error'],
      stepNum: 1,
      prefix: prefix,
      currentStatus: this.status,
      isTimer: false
    }
  },
  computed: {
    stepClass () {
      return [
        `${this.prefix}`,
        `${this.prefix}-${this.currentStatus}`
      ]
    },
    stepHeadIconClass () {
      return [
        'sh-step-head-icon',
        {
          'is-success': this.currentStatus === 'finish'
        }
      ]
    },
    isShowStepNum () {
      return this.currentStatus !== 'finish' && this.currentStatus !== 'error' && !this.isTimer
    },
    iconClass () {
      return { 'iconClass': this.currentStatus === 'finish' }
    },
    stepHeadClass () {
      return [
        'sh-step-head',
        { 'is-timer': this.isTimer }
      ]
    }
  },
  updated () {
  },
  mounted () {
  },
  methods: {
    selectStep () {
      this.$parent.selectStep(this.stepNum)
    }
  },
  watch: {
    currentStatus (val) {
      this.currentStatus = val
    },
    status (val) {
      this.currentStatus = val
    }
  }
}
</script>

<style>
</style>
